<template>
    <el-col :span="6">

  <el-card class="box-card">
    <div ref="chart" style="height:38vh;width: 360px;"></div>
    <template #footer>Footer content</template>
  </el-card>
  </el-col>
  </template>

<script>
import axios from 'axios';
import * as echarts from 'echarts'

export default {
data() {
return {
  chart:null,
  data: [] // 初始化 data 变量为空数组
};
},
mounted() {
this.initChart(); // 初始化 Echarts 实例
this.fetchData();
},
methods: {
initChart() {
  this.chart = echarts.init(this.$refs.chart);
},
fetchData() {
  this.$http.get('http://localhost:8080/collect/musiccollect') // 发起后端请求获取查询结果
    .then(response => {
      this.data = response.data; // 将返回的数据赋值给 data 变量
      this.renderChart();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
},
renderChart() {
  const options = {
    // 在这里根据需求配置 Echarts 图表的选项
    title: {
    text: '乐曲收藏top',
    left: 'center'
  },
    tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

    xAxis: {
      type: 'category',
      data: this.data.map(row => row.workname), // 使用 this.data 进行 map 操作
      axisLabel: {
    rotate: 45 // 调整旋转角度，可以根据需要进行调整
  }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: this.data.map(row => row.musiccount) // 使用 this.data 进行 map 操作
    }]
  };
  this.chart.setOption(options);
}
}
};
</script>

<style>
/* 在这里添加你的样式 */
</style>